<template>
	<view class="tsi1-container">
			<mescroll-uni
				:height="`${height - 76}rpx`"
				:down="downOption"
				:up="upOption"
				@init="mescrollInit"
				@down="downCallback"
				@up="upCallback"
			>
				<!-- 数据列表 -->
				<view class="list">
					<view
						v-for="(item,index) in list"
						:key="index"
						@click="toDetail(item)"
						class="border-bottom padding-sm"
					>
						<view class="padding-tb-sm border-bottom text-lg">
							<image class="tag" :src="`/static/images/icons/${getMarketCode(item.allcode)}.png`" mode=""></image>
							<text>{{item.title}}</text>
							<text class="padding-left-sm text-gray">{{item.code}}</text>
						</view>
						<view class="flex flex-wrap text-nomal">
							<view class="col-2">
								<text class="label">买卖类别</text>
								<text :class="item.is_sell==0?'text-red':'text-green'">证券{{item.is_sell==0?'买入':'卖出'}}{{item.buytype==7?'(大宗)':''}}</text>
							</view>
							<view class="col-2">
								<text class="label">当前状态</text>
								<text>挂单</text>
							</view>
							<view class="col-2">
								<text class="label">委托数量</text>
								<text>{{item.number}}</text>
							</view>
							<view class="col-2">
								<text class="label">委托价格</text>
								<text>{{item.buyprice}}</text>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
	</view>
</template>

<script setup>
import {ref, onBeforeMount} from 'vue';
import {onPageScroll, onReachBottom} from '@dcloudio/uni-app';
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";

const {mescrollInit, downCallback, getMescroll} = useMescroll(onPageScroll, onReachBottom);

// api
import {entrustList} from "@/api/user.js";

// utils
import {getMarketCode} from '@/utils/stock.js';

// props
const props = defineProps({
	height: {
		type: String,
		default: ''
	}
});

onBeforeMount(() => {
	getListFn();
});

// mescroll-body 配置（down && up）
const downOption = {
	auto: false
};
const upOption = {
	auto: false,
	empty: {
		use : true,
		icon: '/static/images/wushuju.png',
		tip: '~ 空空如也 ~'
	}
};

const getListFn = () => {
	setTimeout(function() {
		getMescroll().resetUpScroll();
	}, 0);
};

// 列表数据
const list = ref([]);

const upCallback = (mescroll) => {
	entrustList({
		status: 2,
		buytype: "1,7",
		page: mescroll.num,
		size: mescroll.size
	}).then(res=>{
		if(res.code==1){
			if(mescroll.num == 1) list.value = [];
			list.value =list.value.concat(res.data.list);
			mescroll.endSuccess(res.data.list.length);
		} else {
			mescroll.endErr();
		}
	});
};

const toDetail = (item) => {
	uni.navigateTo({
		url:`/pages/shares/entrustDetail?data=${JSON.stringify(item)}`
	})
};

defineExpose({getListFn});
</script>

<style lang='scss' scoped>
.tsi1-container {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 38rpx 30rpx;
	box-sizing: border-box;
	
	.col-2{
		margin-top: 16rpx;
	}
	
	.label{
		padding-right: 16rpx;
		color: #999;
	}
	
	.tag{
		width: 36rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}
	
	::v-deep(.mescroll-uni) {
		width: 100%;
		height: 100%;
		
		.empty-icon {
			width: 220rpx;
		}
	}
}
</style>